<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.com">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link type="text/css" rel="stylesheet" th:href="@{static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{static/css/ddCss/indexCss.css}"/>
    <link rel="Shortcut Icon" th:href="@{static/img/afvzf-obrwj-001.ico}" type="image/x-icon"/>
</head>
<body>

<!--轮播图-->
<!--<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item">
            <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" th:src="@{static/img/3.jpg}" data-holder-rendered="true">
        </div>
        <div class="item active">
            <img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide [1140x500]" th:src="@{static/img/banner1.jpg}" data-holder-rendered="true">
        </div>
        <div class="item">
            <img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide [1140x500]" th:src="@{static/img/banner3.jpg}" data-holder-rendered="true">
        </div>
        <div class="item">
            <img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide [1140x500]" th:src="@{static/img/banner4.jpg}" data-holder-rendered="true">
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>-->
<header class="navbar navbar-static-top bs-docs-nav" id="top">
    <div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <svg t="1584866289726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3387" width="200" height="200">
                <path d="M750.08 657.92c-16.384 0-30.208 2.56-44.032 8.192l-44.032-52.224c33.28-38.4 55.296-90.624 55.296-145.92s-19.456-101.888-52.224-140.288l27.648-24.576c16.384 8.192 33.28 13.824 52.224 13.824 63.488 0 115.712-52.224 115.712-115.712 0-63.488-52.224-115.712-115.712-115.712-63.488 0-115.712 52.224-115.712 115.712 0 13.824 2.56 30.208 8.192 41.472l-35.84 30.208c-34.304-19.968-73.216-30.208-112.64-30.208-44.032 0-85.504 13.824-121.344 32.768l-41.472-52.224c0-5.632 2.56-13.824 2.56-19.456 0-40.96-32.768-74.24-73.728-74.24h-0.512c-40.96 0-74.24 32.768-74.24 73.728v0.512c0 40.96 32.768 74.24 73.728 74.24H262.656L306.688 332.8c-27.648 38.4-46.592 85.504-46.592 134.656 0 35.84 8.192 71.68 24.576 101.888l-35.84 30.208c-8.192-5.632-19.456-5.632-30.208-5.632-49.664 0-90.624 41.472-90.624 90.624 0 49.664 41.472 90.624 90.624 90.624s90.624-41.472 90.624-90.624c0-8.192 0-16.384-2.56-24.576l30.208-27.648c41.472 35.84 93.696 57.856 154.112 57.856 33.28 0 63.488-5.632 90.624-19.456l46.592 57.856c-11.264 19.456-19.456 44.032-19.456 68.608 0 77.312 63.488 140.288 143.36 140.288s143.36-63.488 143.36-140.288c0.512-75.776-65.536-139.264-145.408-139.264z m-261.632-11.264c-99.328 0-181.76-79.872-181.76-178.688C306.688 368.64 389.12 289.28 488.448 289.28s181.76 79.872 181.76 178.688c0 99.328-82.432 178.688-181.76 178.688zM430.592 465.408c0.512 18.432-13.824 33.28-32.256 33.792-18.432 0.512-33.28-13.824-33.792-32.256v-1.536c0-18.432 14.848-32.768 33.28-32.768 18.432-0.512 32.768 14.336 32.768 32.768z m88.064 0c0 18.432-14.848 33.28-32.768 33.28-18.432 0-33.28-14.848-33.28-32.768 0-18.432 14.848-32.768 33.28-32.768s32.768 13.824 32.768 32.256z m91.136 0c0 18.432-14.848 33.28-32.768 33.28s-33.28-14.848-33.28-32.768c0-18.432 14.848-32.768 33.28-32.768 17.92-1.024 32.768 13.824 32.768 32.256z"
                      fill="#FF6A00" p-id="3388"></path>
            </svg>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <svg t="1584867201852" class="dropdown-toggle" data-toggle="dropdown" role="button"
                         aria-haspopup="true" aria-expanded="false" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="4786" width="50" height="50">
                        <path d="M309.52 494.12c-1.94 0-3.47 0.28-4.67 0.76 1.63-0.49 3.37-0.76 5.16-0.76L309.52 494.12zM845.13 707.52c0.05-0.99 0.18-1.96 0.39-2.9C845.29 705.05 845.17 705.97 845.13 707.52zM880.86 313.29c0.01-0.04 0.01-0.09 0.01-0.13l0-0.46C880.87 312.9 880.87 313.1 880.86 313.29zM845.11 313.23c0 0.04 0 0.08 0.01 0.12-0.01-0.21-0.01-0.43-0.01-0.65L845.11 313.23zM866.673 849.43c-5.03-37.45-16.03-73.61-32.69-107.48-3.26-6.62-6.71-13.13-10.37-19.51-0.01-0.02-0.02-0.04-0.04-0.06-15.86-26.86-35.32-51.8-58-74.06l-0.01-0.01c-4.93-4.84-10.01-9.56-15.24-14.14-37.29-32.68-80.34-56.91-126.25-71.65 8.31-4.6 16.35-9.76 24.07-15.47 8.79-6.48 17.16-13.68 25.03-21.55 41.39-41.39 64.19-96.43 64.19-154.97 0-58.54-22.8-113.58-64.19-154.97-40.64-40.64-94.44-63.35-151.78-64.17-0.91-0.01-1.82-0.02-2.73-0.02-0.91 0-1.82 0.01-2.73 0.02-57.34 0.82-111.14 23.53-151.78 64.17-41.39 41.39-64.19 96.43-64.19 154.97 0 58.54 22.8 113.58 64.19 154.97 7.87 7.87 16.24 15.07 25.03 21.55 7.72 5.71 15.76 10.87 24.07 15.47-45.91 14.74-88.96 38.97-126.25 71.65-5.23 4.58-10.31 9.3-15.24 14.14-22.7 22.28-42.18 47.24-58.05 74.13-3.66 6.38-7.11 12.89-10.37 19.51-16.66 33.87-27.66 70.03-32.69 107.48-1.61 12 6.81 23.03 18.8 24.64 0.99 0.13 1.98 0.2 2.95 0.2 0.89 0 1.76-0.05 2.63-0.16 8.67-1.89 15.67-8.96 17.03-18.25 10.1-69.32 43.14-132.31 90.63-180.28 56.36-56.95 133.07-92.74 215.97-92.88l0.47 0c82.72 0.28 159.25 36.04 215.5 92.88 47.49 47.97 80.53 110.96 90.63 180.28 1.36 9.27 8.33 16.33 16.98 18.24 0.02 0 0.03 0.01 0.05 0.01 0.87 0.11 1.74 0.16 2.63 0.16 0.97 0 1.96-0.07 2.95-0.2C859.863 872.46 868.283 861.43 866.673 849.43zM518.193 545.86c-0.44 0-0.88 0-1.32-0.01-81.8-0.6-154.73-57.43-174.66-133.66-0.22-0.83-0.44-1.67-0.64-2.51-3.12-12.6-4.78-25.7-4.78-39.15 0-13.45 1.66-26.7 4.78-39.52 0.2-0.86 0.42-1.71 0.64-2.56 20.04-78.14 93.65-140.25 175.98-140.25l0.94 0c82.33 0 155.94 62.11 175.98 140.25 0.22 0.85 0.44 1.7 0.64 2.56 3.12 12.82 4.78 26.07 4.78 39.52 0 13.45-1.66 26.55-4.78 39.15-0.2 0.84-0.42 1.68-0.64 2.51-19.93 76.23-92.86 133.06-174.66 133.66C519.703 545.86 518.953 545.86 518.193 545.86z"
                              p-id="4787" fill="#707070"></path>
                    </svg>
                    <ul class="dropdown-menu">
                        <li><a id="userDiv" href="#" th:value="${user.userName}" th:text="${user.userName}"></a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>
<div class="content">
    <div class="messageBanner">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span class="panel-title">消息</span>
                <span class="status"></span>
                <span class="label label-primary sendMessageBt">发布消息</span>
            </div>
            <div class="panel-body messageContnet">
                <div class="col-sm-12">
                    <div id="receiverDiv" class="list-group"></div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" th:src="@{static/js/jQ/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{static/plugins/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{static/plugins/bootbox/bootbox.js}"></script>
<script type="text/javascript">
    var ws = null;
    var wsUrl = "ws://localhost:8081/MqDemo/websocket/";

    if ('WebSocket' in window) {
        ws = new WebSocket(wsUrl);
    } else {
        alert("当前浏览器不支持WebScoket");
    }
    /**
     *  连接服务器
     * */
    ws.onopen = function () {
        jQuery(".status").css("background", "rgba(0,255,0)");
    };
    /**
     * 收到消息
     * @param event
     */
    ws.onmessage = function (event) {
        setMessage(event.data);
    };
    /**
     *  错误
     * */
    ws.onerror = function (event) {
        setMessage("发生错误" + event)
    }
    ws.onclose = function () {
        setMessage("离开了！")
    }

    function setMessage(msg) {
        var jsonObject = jQuery.parseJSON(msg);
        console.log(jsonObject.user);
        console.log(jsonObject.message);
        var str = "<a href=\"#\" class=\"list-group-item message\">\n" +
            "            <h4 class=\"list-group-item-heading\">" + jsonObject.message + "</h4>\n" +
            "            <p class=\"list-group-item-text\">" + jsonObject.user + "</p>\n" +
            "        </a>";

        $("#receiverDiv").append(str);
    }

    jQuery(".sendMessageBt").on("click", function () {
        $.ajax({
            url: "toSendMessagePage",
            type: "post",
            data: {
                "userName": $("#userDiv").attr("value")
            },
            success: function (responseText) {
                bootbox.confirm({
                    size: "large",
                    title: "消息编辑",
                    message: responseText,
                    buttons: {
                        confirm: {
                            label: "发送"
                        },
                        cancel: {
                            label: "取消"

                        }
                    },
                    callback: function (result) {
                        var user = $("#sendDiv").val();
                        var message = $("#userDiv2").text();
                        console.log(user);
                        if (result) {
                            $.ajax({
                                url: "sendMessage",
                                type: "post",
                                data: {
                                    "message":message,
                                    "user": user
                                },
                                success: function (responseText) {
                                    $("#tip").empty().append("<p>" + responseText + "</p>").show(500);
                                }
                            })
                        }
                    }
                });
            }
        })
    })
</script>
</html>